<template>
  <div class="loginContainer">
    <Form ref="login" :model="login" :rules="loginRules"  class="card-box">
      <FormItem class="formLogin-title">
        <h3>登录</h3>
      </FormItem>
      <FormItem prop="username">
        <Input size="large" type="text" v-model="login.username" placeholder="用户名" >
          <Icon type="ios-person-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem prop="password">
        <Input size="large"  type="password" v-model="login.password" placeholder="密码">
          <Icon type="ios-locked-outline" slot="prepend"></Icon>
        </Input>
      </FormItem>
      <FormItem class="login-no-bottom">
        <Checkbox-group v-model="login.remember">
          <Checkbox label="记住密码" name="remember"></Checkbox>
        </Checkbox-group>
      </FormItem>
      <FormItem class="login-no-bottom">
        <Row >
          <Col :xs="{ span: 4, offset: 6 }" >
            <Button type="primary" @click="submit('login')">登录</Button>
          </Col>
          <Col :xs="{ span: 4, offset: 6 }">
            <Button  type="primary" @click="reset('login')">重置</Button>
          </Col>
        </Row>
      </FormItem>
    </Form>
  </div>
</template>

<script>
  export default {
    name: "login",
    data: function () {
      return {
        login: {
          username: '',
          password: '',
          remember: []
        },
        loginRules: {
          username: [
            { required: true, message: '请填写用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请填写密码', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      submit: function(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('Success!');
          } else {
            this.$Message.error('Fail!');
          }
        })
      },
      reset: function(name) {
        this.$refs[name].resetFields();
      }
    }
  }
</script>

<style scoped>
.loginContainer {
  width: 400px;
  height: 390px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -195px;
}
</style>
